import React, { Component } from 'react';
import { Button } from 'antd';
import MazeImp from './maze';
import './style.less';
class Maze extends Component {
	constructor() {
		super();
		this.state = {
			start: true
		};
	}
	componentDidMount() {
		this.maze = new MazeImp();
		this.maze.start();
	}
	switch() {
		let oldStart = this.state.start;
		oldStart ? this.maze.clear() : this.maze.start();
		this.setState({
			start: !oldStart
		});
	}
	render() {
		let { start } = this.state;
		return (
			<div className="maze-box">
				<canvas id="cvs"></canvas>
				<h1>广度优先遍历生成迷宫</h1>
				<Button type="primary" onClick={this.switch.bind(this)}>{start ? '清除' : '开始'}</Button>
				<a className="maze-link" href="https://gitee.com/Hhouzhihoujue/ts_maze">查看源码</a>
			</div>
		);
	}
}

export default Maze;